<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border: 1px solid black
        }
        th {background-color:black;color : white}
    </style>
    <title>CDEE list example</title>
    <script type="text/javascript" src="cdee.js">
    </script>

    <script type="text/javascript">

        var Matrix = {
            "<TABLE>":{"*":{"<TR>":{"*":{"<TD>":"text"}}}}
        };
        
        var TBodyMatrix = {
            "*":{"<TR>":{"*":{"<TD>":"text"}}}
        };


        var listComp = { "(model.title)":{"<H1>":"key"},"(model.items)":{"<LI>":"key"}};

        var recordset = [{name:"Jan Jansen", age:"10"}, {name:"Jan Klaassen", age:"15"}];
        
        var listItems = {title: 'fruit', items: ['appels', 'peren', 'pruimen', 'druiven'] };
        var aMatrix = [
            [1, 2],
            [3, 4]
        ];
        cdee.mylist = {"(fruits)":{"<li>":"key"}};
        var fruits = ['appels', 'peren', 'pruimen', 'druiven'];

    </script>
</head>


<body onload="cdee.execute()"><!--onload="cdee.execute()"-->
<h1>Attribute-grammar showcase</h1>
<div data-cdee="Matrix" data-model="aMatrix">
</div>

<BR>
<table data-cdee="TBodyMatrix" data-model="recordset">
<TR><TH>name</TH><TH>age</TH></TR>
</table>

<BR>

<ul id="list1" data-cdee="listComp"    data-model="listItems"></ul>

<hr>
<ul id="list2" data-cdee="cdee.mylist" data-model="fruits"></ul>

<hr>
<ul id="list3" data-cdee="cdee.list" data-model="fruits"></ul>

</body>
</html>
